<template>
  <el-form ref="loginFormRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
    <el-form-item prop="username">
      <el-input v-model="form.username" prefix-icon="el-icon-user" clearable :placeholder="t('login.userPlaceholder')">
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
                :placeholder="t('login.PWPlaceholder')"></el-input>
    </el-form-item>
    <el-form-item style="margin-bottom: 10px;">
      <el-col :span="12">
        <el-checkbox :label="t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
      </el-col>
      <el-col :span="12" class="login-forgot">
        <router-link to="/reset_password">{{ t('login.forgetPassword') }}？</router-link>
      </el-col>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 100%;" :loading="isLogin" round @click="login">{{
          t('login.signIn')
        }}
      </el-button>
    </el-form-item>
    <div class="login-reg">
      {{ t('login.noAccount') }}
      <router-link to="/user_register">{{ t('login.createAccount') }}</router-link>
    </div>
  </el-form>
</template>

<script setup>
import {reactive, ref} from "vue";

import ToolUtils from "@/utils/tool.js";
import Apis from '@/api'
import {useI18n} from "vue-i18n";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";

const {t} = useI18n()
const router = useRouter()

let loginFormRef = ref()

let form = reactive({
  username: "",
  password: "",
  autologin: false
})
const rules = reactive({
  username: [
    {required: true, message: t('login.userError'), trigger: 'blur'}
  ],
  password: [
    {required: true, message: t('login.PWError'), trigger: 'blur'}
  ]
})
let isLogin = ref(false)


const login = async () => {
  let validate = await loginFormRef.value.validate().catch(() => {
  })
  if (!validate) {
    return false
  }

  isLogin.value = true
  //获取token
  let user = await Apis.api_login.login.post({
    username: form.username,
    password: ToolUtils.crypto.MD5(form.password)
  });

  if (user.code === 0) {
    ToolUtils.cookie.set("TOKEN", user.data.token, {
      expires: form.autologin ? 24 * 60 * 60 : 0
    })
    ToolUtils.data.set("USER_INFO", user.data.userInfo)
  } else {
    isLogin.value = false
    ElMessage.error(user.message)
    return false
  }
  //获取菜单
  let menu = await Apis.api_user_menu.user_menu.get();
  if (menu.code === 0) {
    if (menu.data.menu.length === 0) {
      isLogin.value = false
      await ElMessageBox.alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
        type: 'error',
        center: true
      })
      return false
    }
    ToolUtils.data.set("MENU", menu.data.menu)
    ToolUtils.data.set("PERMISSIONS", menu.data.permissions)
  } else {
    isLogin.value = false
    ElMessage.warning(menu.message)
    return false
  }

  await router.replace({
    path: '/'
  })
  ElMessage.success("Login Success 登录成功")
  isLogin.value = false
}

</script>

<style>
</style>
